<template>
  <div class="left-side">
    <div class="left-side-inner">
      <el-menu class="menu-box" theme="dark" router :default-active="$route.path">
        <div v-for="(item, index) in nav_menu_data" :key="index">
          <el-menu-item class="menu-list" v-if="typeof item.child === 'undefined'" :index="item.path">
            <i class="icon fa" :class="item.icon"></i>
            <span v-text="item.title" class="text"></span>
          </el-menu-item>
          <el-submenu :index="item.path" v-else>
            <template slot="title">
              <i class="icon fa" :class="item.icon"></i>
              <span v-text="item.title" class="text"></span>
            </template>
            <el-menu-item class="menu-list" v-for="(sub_item, sub_index) in item.child" :index="sub_item.path" :key="sub_index">
              <span v-text="sub_item.title" class="text"></span>
            </el-menu-item>
          </el-submenu>
        </div>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: 'slide',
  data() {
    return {
      nav_menu_data: []
    }
  },
  methods: {
    getSildeBar: function () {
      var jsonurl = (location.href.indexOf('153') > -1 ? 'http://192.168.31.153:8081/' : '')
      this.$http({
        url: jsonurl+'left-slideber.json',
      }).then( (data)=>  {
        this.nav_menu_data=data.data
      })
    }
  },
  mounted: function () {
    this.getSildeBar()
  }
}
</script>
<style lang="scss">
.left-side {
  position: fixed;
  top: 80px;
  left: 0;
  bottom: 0;
  width: 220px;
  height: 100%;
  overflow-y: auto;
  background-color: #343f55;
  .menu-box {
    background-color: #343f55;
    .menu-list,
    .el-submenu__title {
      height: 45px;
      line-height: 45px;
      color: #fff;
      background-color: #343f55;
      .icon {
        width: 16px;
        font-size: 14px;
      }
      .text {
        margin-left: 10px;
      }
      &.is-active,
      &:hover {
        background-color: #353f4f !important;
        color: #65cea7;
      }
    }
  }
}
</style>

